<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <form action=" http://192.168.58.110/php/get.php" method="get">
        <input type="text" name="username" class="user">
        <br>
        <input type="password" name="password" class="pwd">
        <br>
        <button type="submit" class="btn">注册</button>
    </form> -->

    <input type="text" name="username" class="user">
    <br>
    <input type="password" name="password" class="pwd">
    <br>
    <button type="submit" class="btn">注册</button>


    <script>

        // 在进行数据请求的过程中
        //    1 不需要前端携带数据
        //    2 需要携带数据
        //       get方式携带数据   地址栏后面拼接?key=value&key=value&key=value

        // form也可以实现数据交互
        // ajax也可以实现数据交互
        //    异步无刷新技术   --- 实现局部刷新

        // http://192.168.58.110/php/get.php
        //    要求  
        //      请求方式get
        //      需要携带数据
        //          username   名字          
        //          password   密码

        const get = ele => document.querySelector(ele);
        get('.btn').onclick = function () {
            // 获取用户名和密码
            const username = get('.user').value;
            const password = get('.pwd').value;
            // 验证
            // 请求
            const xhr = new XMLHttpRequest();
            xhr.open('get', `http://192.168.58.110/php/get.php?username=${username}&password=${password}`, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            } 
        }




    </script>

</body>

</html>